import axios from 'axios';
import { Subject, Subscription } from 'rxjs';
import { Options, Vue } from 'vue-class-component';
import { Prop } from 'vue-property-decorator';
import './grid.less';
import { dataBaseType } from '@/codelist';
import { tagType } from '@/codelist';
import {Environment} from "@/environment";

@Options({})
export class Grid extends Vue {
    /**
     * 视图通讯对象
     *
     * @type {Subject<ViewState>}
     * @memberof Grid
     */
    @Prop()
    viewState!: Subject<ViewState>;

    /**
     * 视图订阅事件
     *
     * @type {(Subscription | undefined)}
     * @memberof Grid
     */
    viewStateEvent: Subscription | undefined;

    /**
     * 表格数据
     *
     * @type {any[]}
     * @memberof Grid
     */
    dataSource: any[] = [];

    /**
     * 每页数量
     *
     * @type {number}
     * @memberof Grid
     */
    pageSize: number = 50;

    /**
     * 当前页码
     *
     * @type {number}
     * @memberof Grid
     */
    pageNo: number = 1;

    /**
     * 加载状态
     *
     * @type {boolean}
     * @memberof Grid
     */
    loading: boolean = false;

    /**
     * 表格列
     *
     * @type {any[]}
     * @memberof Grid
     */
    columns: any[] = [
        {
            title: 'ID',
            dataIndex: 'id',
            key: 'id',
        },
        {
            title: '地址',
            dataIndex: 'url',
            key: 'url',
        },
        {
            title: '名称',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '标签',
            dataIndex: 'label',
            key: 'label',
            customRender: (record: any) => this.tranferTagTypeCode(record),
        },
        {
            title: '类型',
            dataIndex: 'type',
            key: 'type',
            customRender: (record: any) => this.tranferDatabaseTypeCode(record),
        },
        {
            title: '描述',
            dataIndex: 'description',
            key: 'description',
        },
        {
            title: '操作',
            customRender: (record: any) => this.renderActionBar(record),
        },
    ];

    /**
     * 数据库类型转换
     * @param record
     * @returns
     */
    tranferDatabaseTypeCode(record: any) {
        const item = dataBaseType.find(item => item.key === record.record.type);
        return <a-tag color='blue'>{item?.value}</a-tag>;
    }

    /**
     * 标签类型转换
     * @param record
     * @returns
     */
    tranferTagTypeCode(record: any) {
        const item = tagType.find(item => item.key === record.record.label);
        return <a-tag color='blue'>{item?.value}</a-tag>;
    }

    /**
     * 绘制操作栏
     *
     * @param {*} record
     * @return {*}
     * @memberof Grid
     */
    renderActionBar(record: any) {
        return (
            <a-popconfirm
                title='确定删除?'
                cancelText='取消'
                okText='确认'
                onConfirm={() => this.onDelete(record.record.id)}
            >
                <a style='white-space:nowrap;'>删除</a>
            </a-popconfirm>
        );
    }

    /**
     * 删除方法
     *
     * @param {string} key
     * @memberof Grid
     */
    onDelete(key: string) {
        axios
            .get(Environment.BASEURL + '/api/1/database/config/1/delete/byId', {
                params: {
                    id: key,
                },
            })
            .then((res: any) => {
                if (res && res.status === 200) {
                    const data = res.data;
                    if (data.code === 1) {
                        console.log('删除成功!');
                        this.dataSource = this.dataSource.filter(item => item.id !== key);
                    }
                }
            })
            .catch((err: any) => {
                console.log(err);
            });

        setTimeout(() => {
            this.loading = false;
        }, 1000);
    }

    /**
     * Vue生命周期，实例创建完成
     *
     * @memberof Grid
     */
    created() {
        this.load();
        this.viewStateEvent = this.viewState.subscribe(({ tag, action, data }) => {
            if (tag === 'grid') {
                if (action === 'refresh') {
                    this.load(data);
                }
            }
        });
    }

    /**
     * 加载数据
     *
     * @memberof Grid
     */
    async load(data?: any) {
        const params = { pageSize: this.pageSize, pageNo: this.pageNo };
        if (data) {
            Object.assign(params, data);
        }
        this.loading = true;
        await this.$http.get('/api/1/database/config/1/page', params)
            .then((res: any) => {
                if (res && res.status === 200) {
                    const data = res.data;
                    if (data.code === 1) this.dataSource = data.data.data;
                }
            })
            .catch((err: any) => {
                console.log(err);
            });
            this.loading = false;
    }

    /**
     * 双击事件
     *
     * @param {*} record
     * @memberof Grid
     */
    onDblclick(record: any) {
        this.$emit('rowDblClick', record);
    }

    /**
     * 绘制函数
     *
     * @return {*}
     * @memberof Grid
     */
    render() {
        return (
            <a-table
                v-loading={this.loading}
                dataSource={this.dataSource}
                columns={this.columns}
                customRow={(record: any) => {
                    return {
                        onClick: (event: any) => { }, // 点击行
                        onDblclick: (event: any) => this.onDblclick(record),
                        onContextmenu: (event: any) => { },
                        onMouseenter: (event: any) => { }, // 鼠标移入行
                        onMouseleave: (event: any) => { },
                    };
                }}
                rowKey='id'
            ></a-table>
        );
    }
}
